<template>
	<view class="container">
		<cu-header bgColor="bg-gradual-blue" :isBack="true">
			<block slot="content" class="page-name">我的关注</block>
		</cu-header>
		<view class="contents bg-white">
			<cu-cell title="最近关注">
				<block slot="right" >更多</block>
			</cu-cell>
			<cu-grid cols="4" :datas="shops" @onchange="onSelectOrder"></cu-grid>
			<cu-cell title="店铺上新" :isRight="false"></cu-cell>
			<view v-for="(item,index) in 3" :key="index" @click="onSeletAddress">
				<view class="cu-card dynamic no-card">
					<view class="cu-item shadow padding-sm">
						<view class="cu-list menu-avatar">
							<view class="cu-item">
								<view class="cu-avatar round lg"
									style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);">
								</view>
								<view class="content flex-sub">
									<view class="flex justify-between">
										<view>
											<view>店铺名称</view>
											<view>5小时前</view>
										</view>
										<view class="cu-tag line-gray round">
											更多商品
										</view>
									</view>

								</view>
							</view>
						</view>
						<view class="grid flex-sub padding-lr col-3 grid-square">
							<view class="bg-img"
								style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);"
								v-for="(item,index) in 9" :key="index">
							</view>
						</view>
					</view>
				</view>
			</view>
			<view style="height: 100rpx;"></view>
		</view>

	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import cuCell from '@/components/diy/content/cu-cell.vue';
	import cuTitle from '@/components/diy/content/cu-title.vue';
	import cuGrid from '@/components/diy/list/cu-grid.vue';
	import cuListAftersale from '@/components/diy/list/cu-list-aftersale.vue';
	export default {
		computed: {
			...mapState(['hasLogin', 'forcedLogin', 'userinfo'])
		},
		components: {
			cuCell,
			cuTitle,
			cuGrid,
			cuListAftersale
		},
		data() {
			return {
				shops: [{
						name: '以纯',
						color: 'red',
						cuIcon: 'btn'
					},
					{
						name: '美特斯邦威',
						color: 'red',
						cuIcon: 'btn'
					},
					{
						name: '李宁',
						color: 'red',
						cuIcon: 'btn'
					},
					{
				
						name: '小米',
						color: 'red',
						cuIcon: 'btn'
					}
					
				],
				lists: [{
						name: '以纯',
						status: 1,
						goods: [{
								name: "时尚运动鞋",
								price: 150,
								number: 2,
								image: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg'
							},
							{
								name: "运动套装",
								price: 280,
								number: 2,
								image: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg'
							}
						]
					},
					{
						name: '美特斯邦威',
						status: 1,
						goods: [{
							name: "夏季时尚短袖",
							price: 150,
							number: 2,
							image: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg'
						}]
					},
					{
						name: '李宁',
						status: 1,
						goods: [{
							name: "男鞋2021新款网面沙滩鞋",
							price: 150,
							number: 2,
							image: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg'
						}]
					}
				]
			};
		},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function(res) {
			if (res.from === 'button') {
				// 来自页面内分享按钮
				console.log(res.target);
			}
			return this.shareinfo;
		},
		onLoad() {},
		onShow() {

		},
		methods: {
			...mapMutations(['logout', 'login', 'loginsoure']),
			onSelect: function(e) {
				this.$util.redirectTo('/pages/shop/aftersale/details')
			}

		}
	};
</script>

<style scoped></style>
